import { PageHeaderNew } from "@/components";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { getActivityList } from "../service";
import { getParamsByUrl, htmlUnEscape } from "@/utils/tools";

interface DetailType {
  id: number | string;
  faburen: string;
  faburenAddress: string;
  title: string;
  sentTime: string;
  num: number | string;
  img: string;
  content: string;
}

export default function ActivityDetails() {
  const navigate = useNavigate();
  const [pageParams, setPageParams] = useState<any>();
  const [pageTitle, setPageTitle] = useState<string>();
  const [detail, setDetail] = useState<DetailType>();

  const getList = async () => {
    try {
      const res = await getActivityList({
        sendType: pageTitle,
        messageType: "1",
      });
      if (res?.success && res?.code === 200 && pageParams?.id) {
        let data = res?.data?.filter((i: any) => i?.id == pageParams?.id)[0];
        setDetail(data);
        let content = htmlUnEscape(data?.content);
        let parentHTML = document.getElementById("ad_detail_content");
        parentHTML.innerHTML = content;
      }
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    if (pageTitle) getList();
  }, [pageTitle, pageParams]);
  useEffect(() => {
    let finalObj: any = getParamsByUrl(location.search);
    setPageParams(finalObj);
    switch (finalObj?.type) {
      case "activities":
        setPageTitle("社区活动");
        break;
      case "guidance":
        setPageTitle("就业引导");
        break;
      case "support":
        setPageTitle("创业扶持");
        break;
      default:
        break;
    }
  }, []);

  return (
    <div className="ad_contarnier">
      <div className="header-bg"></div>
      <PageHeaderNew
        title="活动详情"
        goBack={() => navigate(`/communityActivities?type=${pageParams?.type}`)}
      />

      <div className="ad_content">
        <div className="ad_c_content">
          <img src="/images/mycommunity/bioqian.png" alt="" />
          <div className="ad_brief">
            <div className="ad_brief_content">
              <div className="ad_bc_title">{detail?.title}</div>
              <div className="ad_bc_img">
                <img src={detail?.img} alt="" />
              </div>
              <div className="ad_bc_brief">
                <div className="ad_bcb_title">活动时间</div>
                <div className="ad_bcb_content">{detail?.sentTime}</div>
                <div className="ad_bcb_title">已报名人数</div>
                <div className="ad_bcb_content">{detail?.num}</div>
              </div>
            </div>
          </div>
          <div className="ad_detail">
            <div className="ad_detail_content" id="ad_detail_content"></div>
          </div>
          <div
            className="ad_application"
            onClick={() => navigate(`/activityApplication${location.search}`)}
          >
            去报名
          </div>
        </div>
      </div>
    </div>
  );
}
